<template>
  <div style="width:10rem;height:100%;">
		<navbar class='navbar' :title="$route.meta.title" :disabled='$route.meta.disabled' :gohome="$route.meta.gohome"></navbar>
        <div  v-show="$route.meta.tabbar">
            <van-tabbar class='tabbar' v-model="t_active">
                
            <van-tabbar-item icon="shop" to='HomeView'>车险</van-tabbar-item>
            <van-tabbar-item icon="chat" to='orderList'>账单</van-tabbar-item>
            <van-tabbar-item icon="records" to='userCenter'>我的</van-tabbar-item>
            <!-- <van-tabbar-item icon="gold-coin" info="20">标签</van-tabbar-item> -->
            </van-tabbar>
        </div>

       <router-view></router-view>
       
  </div>
</template>

<script>
import navbar from "../components/navbar.vue";

export default {
  components: { navbar },
  data() {
    return {
        t_active:this.$route.meta.t_active,
        
    }
  },
  watch: {
    $route: {
        handler: function(val, oldVal){
        console.log();
        // console.log(oldVal)
        this.t_active = val.meta.t_active
        },
        // 深度观察监听
        deep: true
    }
    },
   

  mounted(){
      
  },
  methods: {
   
  }
};
</script>
<style scoped lang="scss">
    .navbar{
        z-index: 30!important;
    }
    .tabbar{
           left: 50%;
    margin-left: -5rem;
        width: 10rem;
        z-index: 30!important;
    }
    .fadeInLeft{
        height: 100%;
    }



</style>
